<template>
  <div class="waterfall_container">
    <div v-masonry transition-duration="0.3s" item-selector=".item" gutter="10">
      <div
        v-masonry-tile
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @touchstart="gtouchstart(item)"
        @touchmove="gtouchmove()"
        @touchend="showDeleteButton(item)"
      >
        <img :src="item.imgUrl" />
      </div>
    </div>
    <van-overlay :show="show" @click="deleteShow">
      <div class="wrapper">
        <div class="block" @click.stop>
          <img src="" ref="img" class="img" />
          <div class="collect">
            <img src="./images/sc.png" alt="" />
          </div>
          <div class="test">收藏</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    list: {
      type: Array,
      default: [],
      timer: 0,
    },
  },
  data() {
    return { show: false };
  },
  created() {},
  methods: {
    //点击去详情页
    goDetail(item) {
      this.$router.push({
        name: "detail",
        params: { id: item.designTemplateId },
      });
    },
    //长按事件（起始）
    gtouchstart(item) {
      this.timer = setTimeout(() => {
        this.show = true;
        this.timer = 0;
        this.$refs.img.src = item.imgUrl;
        document.body.style.overflow = "hidden";
      }, 1000);
      return false;
    },
    showDeleteButton(item) {
      clearTimeout(this.timer); //清除定时器
      if (this.timer != 0) {
        this.goDetail(item);
      }
      return false;
    },
    gtouchmove() {
      clearTimeout(this.timer); //清除定时器
      this.timer = 0;
    },
    deleteShow() {
      document.body.style.overflow = "";
      this.show = false;
    },
  },
};
</script>

<style lang="less" scoped>
.waterfall_container {
  margin-top: 10px;
  padding: 0 10px;
  .item {
    width: 48%;
    box-sizing: border-box;
    img {
      border-radius: 10px;
      width: 100%;
    }
  }
  .van-overlay {
    z-index: 99999;
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      background: rgba(0, 0, 0, 0.01);
      backdrop-filter: blur(3px);
      .block {
        width: 70%;
        text-align: center;
        .img {
          width: 100%;
        }
        .collect {
          width: 50px;
          height: 50px;
          margin: 20px auto;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .test {
          color: #f3f4f9;
        }
      }
    }
  }
}
</style>